<template>
  <div class="category">
    <el-row :gutter="15" type="flex" align="top">
      <el-col :span="6">
        <el-card>
          <el-scrollbar>
            <el-tree ref="categoryTree" accordion :data="categoryData" highlight-current node-key="value" :props="defaultProps" @current-change="currentChange">
              <span slot-scope="{ node, data }">
                <i :class="data.icon" />
                <span style="padding-left: 4px;">{{ node.label }}</span>
              </span>
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="18">
        <ComplexTable
          ref="CategoryTable"
          :query-model="queryModel"
          :table-column-is-show="tableColumnIsShow"
          :create-permission="['pms:category:create']"
          @onResetForm="resetForm"
          @onAddPage="addPage"
          @onSearch="search"
        >
          <template v-slot:search_from_input>
            <el-form-item label="品牌名称" prop="name">
              <el-input
                v-model="queryModel.name"
                placeholder="品牌名称"
                clearable
              />
            </el-form-item>
          </template>

          <template v-slot:table_column>
            <el-table-column
              type="selection"
              width="40"
            />
            <el-table-column
              v-if="tableColumnIsShow.icon.isShow"
              prop="icon"
              label="icon"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.icon"
                />
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableColumnIsShow.name.isShow"
              prop="name"
              label="分类名称"
              align="center"
              header-align="center"
            />
            <el-table-column
              v-if="tableColumnIsShow.parentName.isShow"
              prop="parentName"
              label="上级分类"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.parentId==="0"?"顶级分类": scope.row.parentName }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableColumnIsShow.level.isShow"
              prop="level"
              label="分类级别"
              align="center"
              header-align="center"
            />
            <el-table-column
              v-if="tableColumnIsShow.sort.isShow"
              prop="sort"
              label="排序"
              align="center"
              header-align="center"
            />
            <el-table-column
              label="操作"
              width="200"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                <TableBtn :parameter="scope.row.id" :edit-permission="['pms:category:update' ]" :del-permission="['pms:category:delete' ]" @onDel="del" @onEditPage="editPage" />
              </template>
            </el-table-column>
          </template></ComplexTable>
      </el-col>
    </el-row>
    <!--弹出框-->
    <MyEditDialog :dialog-visible="dialogVisible" :title="title" width="880px" @onDialogSave="save" @onGoBack="dialogVisible=false">
      <template v-slot:dialog_content>
        <EditForm v-if="dialogVisible" ref="EditForm" :edit-model="editFormModel" :validate="formValidate" />
      </template>
    </MyEditDialog>
  </div>
</template>
<script>
import ComplexTable from '@/components/ComplexTable'
import { findAllCategoryREQ, pageCategoryREQ, deleteCategoryREQ, createCategoryREQ, updateCategoryREQ, getCategoryByIdREQ } from '@/api/product/category'
import { listToTree } from 'tree-walk-util'
import TableBtn from '@/components/TableBtn'
import deepcopy from 'deepcopy'
import MyEditDialog from '@/components/MyEditDialog'
import { addValidate, editValidate } from './validate'
import EditForm from './EditForm'
export default {
  name: 'Category',
  components: { ComplexTable, TableBtn, MyEditDialog, EditForm },
  data() {
    return {
      categoryData: [],
      defaultProps: {
        children: 'children',
        label: 'text',
        disabled: 'disabled',
        value: 'value'
      },
      queryModel: {
        name: '',
        parentId: ''
      },
      tableColumnIsShow: {
        parentName: { label: '上级分类', isShow: true },
        name: { label: '分类名称', isShow: true },
        level: { label: '分类级别', isShow: true },
        sort: { label: '分类排序', isShow: true },
        icon: { label: '分类图标', isShow: true }
      },
      defaultEditForm: {
        name: '',
        parentId: '0',
        level: 0,
        sort: '',
        icon: '',
        showStatus: 'SHOW'
      },
      editFormModel: {},
      formValidate: null,
      title: '',
      dialogVisible: false
    }
  },
  computed: {},
  mounted() {
    this.findAllCategory()
  },
  methods: {
    findAllCategory() {
      findAllCategoryREQ().then(data => {
        if (!data || data.length === 0) return
        const tempData = listToTree(data, 'value', 'parentId', 'children').children
        this.categoryData = tempData
      })
    },
    addPage() {
      this.title = '新增分类信息'
      this.editFormModel = deepcopy(this.defaultEditForm)
      const _node = this.$refs['categoryTree'].getCurrentNode()
      const { value, level } = _node || { value: '0', level: null }
      this.editFormModel.parentId = value
      this.editFormModel.level = level === null ? 0 : Number(level + 1)
      this.dialogVisible = true
      this.formValidate = addValidate
    },
    search(queryMode) {
      pageCategoryREQ(queryMode).then(data => {
        // 双重认证
        if (this.$refs['CategoryTable']) { this.$refs['CategoryTable'].setTableAndPage(data) }
      })
    },
    del(id) {
      if (id) {
        deleteCategoryREQ(id).then(v => {
          this.$refs['CategoryTable'].currentChange(1)
          this.findAllCategory()
        })
      }
    },
    save() {
      this.$refs['EditForm'].$refs['EditForm'].validate((valid) => {
        if (valid) {
          if (this.editFormModel.id) {
            updateCategoryREQ(this.editFormModel).then(v => {
              this.findAllCategory()
              this.$refs['CategoryTable'].onSearch()
              this.dialogVisible = false
            })
          } else {
            createCategoryREQ(this.editFormModel).then(v => {
              this.findAllCategory()
              this.$refs['CategoryTable'].onSearch()
              this.dialogVisible = false
            })
          }
        }
      })
    },
    editPage(id) {
      if (id) {
        this.title = '编辑分类信息'
        this.formValidate = editValidate
        getCategoryByIdREQ(id).then(data => {
          this.editFormModel = deepcopy(data)
          this.formValidate = editValidate
          this.dialogVisible = true
        })
      }
    },
    currentChange(row) {
      if (this.queryModel.parentId === row.value) {
        this.$refs['categoryTree'].setCurrentKey(null)
        this.queryModel.parentId = ''
      } else {
        this.queryModel.parentId = row.value
      }
      this.$refs['CategoryTable'].currentChange(1)
    },
    resetForm() {
      this.$refs['categoryTree'].setCurrentKey(null)
      this.queryModel.parentId = ''
    }
  }
}
</script>
<style lang='scss' scoped>
.category .el-tree{
  // height: calc(100vh - 156px);
  // max-height: calc(100vh - 156px) ;
}
</style>
